<template>
  <view v-if="visible" class="toast-container" @touchmove.stop.prevent>
    <view class="toast-mask">
      <view class="toast-box" :class="{ 'toast-success': type === 'success', 'toast-error': type === 'error' }">
        <view class="toast-icon" v-if="type">
          <text v-if="type === 'success'">✓</text>
          <text v-else-if="type === 'error'">×</text>
        </view>
        <view class="toast-content">{{ content }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: Boolean,
  content: { type: String, default: '' },
  type: { type: String, default: '' }, // success, error
  duration: { type: Number, default: 2000 }
})

const emit = defineEmits(['update:modelValue'])
const visible = ref(props.modelValue)
let timer = null

watch(() => props.modelValue, (val) => {
  visible.value = val
  if (val) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      visible.value = false
      emit('update:modelValue', false)
    }, props.duration)
  }
})
</script>

<style scoped lang="scss">
.toast-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  pointer-events: none;
}

.toast-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-box {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 12rpx;
  padding: 24rpx 32rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
  animation: toast-fade-in 0.2s;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
  max-width: 80vw;
  
  &.toast-success {
    background: rgba(82, 196, 26, 0.9);
  }
  
  &.toast-error {
    background: rgba(255, 77, 79, 0.9);
  }
}

.toast-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #fff;
  flex-shrink: 0;
}

.toast-content {
  color: #fff;
  font-size: 28rpx;
  line-height: 1.4;
  text-align: center;
}

@keyframes toast-fade-in {
  from { 
    opacity: 0;
    transform: translateY(20rpx);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 